<template >
	<view>
		<!--顶部bar开始 -->
			<view class="cu-bar bg-white">
				<view class="action" @tap="showModal" data-target="search">
					<text class="cuIcon-searchlist text-orange"></text>
					查找班级
				</view>
				<view v-if="cancel"
				class="action" @tap="clickCancel" data-target="searchClass">
					<text class="cuIcon-roundclose text-red"></text>
					取消
				</view>							
				<view class="action" @tap="showModal" data-target="addClass">
					<text class="cuIcon-writefill text-grey"></text>
					添加班级
				</view>
			</view>
		<!--顶部bar结束 -->
		<classItem :classList="classList" :cId="cId" @getClassValues="getClass()"></classItem>
		<!-- 添加班级控件开始-->
		<view class="cu-modal" :class="modalName=='addClass'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">添加班级</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
			<!--<view v-if="!addClassShow">-->
				<view class="cu-form-group">
					<view class="title">班级名字</view>
					<input placeholder="输入班级信息" name="input"
					:value="dataClassName" @input="DataClassNameChange"></input>
				</view>
				<!--<view class="cu-form-group">
					<view class="title">课程 ID</view>
					<input placeholder="  输入课程编号" name="input"></input>
				</view>-->
				<view class="cu-form-group">
					<view class="title">课程描述</view>
					<input placeholder="输入课程描述" name="input"
					:value="dataClaseDesc" @input="DataClassDescChange"></input>
				</view>
				<!--<view class="cu-form-group">
					<view class="title">添加学生</view>
					<input placeholder="输入学生编号" name="input"></input>-->
					<!--<studentList></studentList>
					<button class='cu-btn bg-blue shadow' 
					@tap="clickAddClass" style="margin: 20upx;">
						选择</button>
				</view>-->
				<button class='cu-btn bg-blue shadow' style="margin: 20upx;"
				@tap="requestClass">添加</button>	
			<!--</view>-->
			<!--添加未分班学生开始 -->
			<!--<view v-if="addClassShow">
				<scroll-view  scroll-y="true" class="scroll-Y">
				<checkbox-group class="block" @change="CheckboxChange">
				<view class="cu-list menu-avatar" >
					<view class="cu-item" 
					 v-for="(item,index) in notClassUserList" :key="index">
						<view class="cu-avatar round lg" :style="[{backgroundImage:'url('+item.avatarurl+')'}]"></view>
						<view class="content">
							<view class="text-grey">{{item.nickname}}</view>
						</view>-->
						<!--<view class="text-grey content">编号:{{item.id}}</view>-->
						<!--多选框开始 -->	
					<!--<checkbox class="round blue" :value="item.openId"></checkbox>
						多选框结束 
					</view>
				</view>
				</checkbox-group>
				</scroll-view>
				<button class='cu-btn bg-blue shadow' style="margin: 20upx;"
				 @tap="clickAddUser">添加</button>
			</view>-->
            <!--添加未分班学生结束 -->
			</view>
		</view>
		<!--添加班级控件结束 -->
		<!-- 查找班级控件开始-->
		<view class="cu-modal" :class="modalName=='search'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">查找班级</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
			<view class="cu-form-group">
				<view class="title">班级名字</view>
				<input placeholder="输入查找班级信息" class="uni-input" type="text" 
				:value="data" @input="dataChange"></input>
			</view>

			<button class='cu-btn bg-blue shadow' style="margin: 20upx;"
			 @tap="searchClass()">查找</button>
			</view>
		</view>
		<!--查找班级控件结束 -->
	</view>
</template>

<script>
import classItem from'./classItem/index.vue';
export default {
	components: {
	  classItem,	  
	},
	data() {
		return {
			classList: [],//班级组
			cancel:false,//顶部中间取消按键显示
			modalName: null,//触发模拟框名称
			cId:0,//课程ID
			data:null,//班级搜索输入值
			values:null,
			dataClaseDesc:null,
			dataClassName:null,
		};
	},
	methods: {
		getClass() {
			this.request({
				url: this.apiServer + '/class/findClassByCId?cId='+this.cId 
			}).then(res => {
				console.log(res);
				this.classList = res.data;
			});
		},
		showModal(e) {
			this.modalName = e.currentTarget.dataset.target;
		},
		hideModal(e) {
			this.modalName = null;
		},
		searchClass() {
			var data = this.data;
		    console.log(data)			
			this.modalName = null;			
			if(data!=null)
			{
			this.request({
				url: this.apiServer + '/class/findClassByShareCode?shareCode='+data
			}).then(res => {
				console.log(res);
				if(res.msg=="操作成功!")
				{
				uni.showToast({
					title: "查找成功"
				});
				this.classList = [res.data];				
				this.cancel=true;					
				}else{
				uni.showToast({
					title: "没有这个班",
					image: "../../static/icon/error.png"
				})	
				}
				this.data=null;
			});				
			}else{
			uni.showToast({
				title: "请重新输入",
				image:"../../static/icon/error.png"
			})	
			}
		},
		clickCancel()//顶部取消按钮事件
		{
			this.cancel=false;
			this.getClass();
		},
		dataChange: function (e) {//搜索框数据改变
			this.data = e.detail.value;
		},
		DataClassDescChange: function (e) {//创建班级课程描述
			this.dataClaseDesc = e.detail.value;
		},
		DataClassNameChange: function (e) {//创建班级课程名称
			this.dataClassName = e.detail.value;
		},
		requestClass()
		{
			if(this.dataClaseDesc!=null&&this.dataClassName!=null)
			{
				this.request({
					url:this.apiServer + '/class/addClass',
					method:'POST',
					data:{
						    "cId": this.cId,
						    "name":this.dataClassName,
						    "desc":this.dataClaseDesc,
					},				    
					header:{
						"Content-Type": "application/x-www-form-urlencoded"
					},
				}).then(res=>{
				this.modalName=null;
				this.getClass();
				if(res.code==0)
				{
					uni.showToast({
						title:"添加成功"
					})
				}
				else{
					uni.showToast({
						title:"添加失败",
					    image:"../../static/icon/error.png"
					})
				}
				})
			}else{
				uni.showToast({
					title:"添加失败",
				    image:"../../static/icon/error.png"
				})
			}

		}
		
	},
	onLoad(option) {
		console.log(option);
		//this.id = option.id;
		this.cId = option.cId;
		this.getClass();
	},
};
</script>

<style>
.scroll-Y {
	height: 600rpx;
}
.scroll-view-item {
	height: 300rpx;
	line-height: 300rpx;
	text-align: center;
	font-size: 36rpx;
}
</style>
